<%@ include file="include.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="general.dbClass.*"%> 
<%@ page import="java.util.ArrayList"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script type="text/javascript">
		
		$(document).ready(function(){
			$("#searchItemTimeSample").datepicker({
				 dateFormat: 'yy-mm-dd',
				 yearRange: '-10:+1'
			});
		});
		
		function addCol(plusColButton){
			var rowDiv=plusColButton.parentNode;
			var count=rowDiv.getAttribute('count');
			var row=parseInt(rowDiv.getAttribute('row'));
			var col=parseInt(rowDiv.getAttribute('count'));
			if (col==4){return;}
			var leftParentheses=document.getElementById('leftParentheses'+row);
			var rightParentheses=document.getElementById('rightParentheses'+row);
			var minusColButton=document.getElementById('minusColButton'+row);
			
			if (col>0){
				var andButton=document.getElementById('booleanButtonSample').cloneNode(true);
				andButton.id='andButton'+row+(col-1);
				andButton.name=andButton.id;
				andButton.value='AND';
				rowDiv.insertBefore(andButton,minusColButton);
			}
			
			var searchItem=document.getElementById('searchItemSample').cloneNode(true);
			searchItem.setAttribute('row',''+row);
			searchItem.setAttribute('col',''+col);
			searchItem.id='searchItem'+row+''+col;
			searchItem.name=searchItem.id;
			
			var searchItemName=document.getElementById('searchItemNameSample').cloneNode(true);
			searchItemName.id='searchItemName'+row+''+col;
			searchItemName.name=searchItemName.id;
			
			var searchItemCompare=document.getElementById('searchItemCompareSample').cloneNode(true);
			searchItemCompare.id='searchItemCompare'+row+''+col;
			searchItemCompare.name=searchItemCompare.id;
			
			var searchItemValue=document.getElementById('searchItemTextSample').cloneNode(true);
			searchItemValue.id='searchItemValue'+row+''+col;
			searchItemValue.name=searchItemValue.id;
			
			searchItem.appendChild(searchItemName);
			searchItem.appendChild(searchItemCompare);
			searchItem.appendChild(searchItemValue);
			rowDiv.insertBefore(searchItem,minusColButton);
			
			count++;
			rowDiv.setAttribute('count',''+count);
			parent.window.document.getElementById('filterFrame').setAttribute('height',getComputedStyle(document.body.parentNode).height);
		}
		
		function removeCol(minusColButton){
			var rowDiv=minusColButton.parentNode;
			var row=parseInt(rowDiv.getAttribute('row'));
			var count=parseInt(rowDiv.getAttribute('count'));
			var plusRowButton=document.getElementById('plusRowButton');
			var maxRow=plusRowButton.getAttribute('row');
			
			if (count>0){
				if (count==1&&row==0){
					document.getElementById('searchItemName00').selectedIndex=0;
					changeCol(document.getElementById('searchItemName00'));
				}else{
					var searchItem=document.getElementById('searchItem'+row+''+(count-1));
					var andButton=document.getElementById('andButton'+row+''+(count-2));
					count--;
					rowDiv.setAttribute('count',count);
					
					rowDiv.removeChild(searchItem);
					rowDiv.removeChild(andButton);				
				}
			}
			
			if (count==0){
				if(row>0&&row==maxRow){
					
					var filter=document.getElementById('filter');
					var rowDiv=document.getElementById('row'+row);
					var orButton=document.getElementById('orButton'+(row-1));
					filter.removeChild(rowDiv);
					filter.removeChild(orButton);
					plusRowButton.setAttribute('row',''+(maxRow-1));
				}
			}
			parent.window.document.getElementById('filterFrame').setAttribute('height',getComputedStyle(document.body.parentNode).height);
		}
		
		function changeCol(searchItemName){
		
			var searchItem=searchItemName.parentNode;
			var row=searchItem.getAttribute('row');
			var col=searchItem.getAttribute('col');
			var searchItemCompare=document.getElementById('searchItemCompare'+row+''+col);
			var searchItemValue=document.getElementById('searchItemValue'+row+''+col);
			var selectedIndex=searchItemName.selectedIndex;
			var selectedValue=searchItemName.options[selectedIndex].value;

			var index=searchItemName.options[selectedIndex].getAttribute('index');
			var newSearchItemValue=getSearchItemValue(searchItemName.options[selectedIndex].getAttribute('index'),row,col);
			newSearchItemValue.id='searchItemValue'+row+''+col;
					
			
			var newSearchItemCompare=getSearchItemCompare(searchItemName.options[selectedIndex].getAttribute('index'));
			if (index=='7'||index=='8'){
				
				var o=$('#searchItemTimeSample').clone(false);
				o.removeAttr('id');
				o.removeClass('hasDatepicker');
				o.attr('id',searchItemValue.id);
				o.attr('name',searchItemValue.id);
				o.datepicker({
					 dateFormat: 'yy-mm-dd',
					 yearRange: '-10:+1'
				});
				o.insertAfter($('#'+searchItemValue.id));
				searchItem.removeChild(searchItemValue);
			}else{
				searchItem.replaceChild(newSearchItemValue, searchItemValue);
			}
			newSearchItemCompare.id='searchItemCompare'+row+''+col;
			newSearchItemValue.name=newSearchItemValue.id;
			newSearchItemCompare.name=newSearchItemCompare.id;			
			searchItem.replaceChild(newSearchItemCompare, searchItemCompare);
		}
		
		function addRow(plusRowButton){
			var filter=document.getElementById('filter');
			var newRow=document.getElementById('rowSample').cloneNode(true);
			var row=parseInt(plusRowButton.getAttribute('row'));
			if (row==3){return;}
			newRow.setAttribute('count',0);
			newRow.setAttribute('row',''+(row+1));
			newRow.id="row"+(row+1);
			
			var searchItem=document.getElementById('searchItemSample').cloneNode(true);
			searchItem.id='searchItem'+(row+1)+''+0;
			searchItem.name=searchItem.id;
			searchItem.setAttribute('row',''+(row+1));
			searchItem.setAttribute('col','0');
			
			
			var leftParentheses=document.getElementById('leftParentheses0').cloneNode(false);
			leftParentheses.id='leftParentheses'+(row+1);
			var rightParentheses=document.getElementById('rightParentheses0').cloneNode(false);
			rightParentheses.id='rightParentheses'+(row+1);
		
			var minusColButton=document.getElementById('minusColButton0').cloneNode(false);
			minusColButton.id='minusColButton'+(row+1);
			var plusColButton=document.getElementById('plusColButton0').cloneNode(false);
			plusColButton.id='plusColButton'+(row+1);
			
			var orButton=document.getElementById('booleanButtonSample').cloneNode(true);
			orButton.id='orButton'+row;
			orButton.name=orButton.id;
			orButton.value="OR";
			orButton.setAttribute('onclick','');
			
			newRow.appendChild(leftParentheses);
			newRow.appendChild(minusColButton);
			newRow.appendChild(plusColButton);
			newRow.appendChild(rightParentheses);
			filter.insertBefore(orButton,plusRowButton);
			filter.insertBefore(newRow,plusRowButton);
			plusRowButton.setAttribute('row',''+(row+1));
			
			addCol(document.getElementById('plusColButton'+(row+1)));
			parent.window.document.getElementById('filterFrame').setAttribute('height',getComputedStyle(document.body.parentNode).height);
		}
		
		function getSearchItemValue(value,row,col){
			var searchItemValueId;
			if (value=='0'){
				searchItemValueId='category';
			}else if (value=='1'){
				searchItemValueId='keyword';
			}else if (value=='4'){
				searchItemValueId='exposureTime';
			}else if (value=='5'){
				searchItemValueId='fnumber';
			}else if (value=='6'){
				searchItemValueId='exposureProgram';
			}else if (value=='9'){
				searchItemValueId='colorSpace';
			}else if (value=='12'){
				searchItemValueId='exposureMode';
			}else if (value=='13'){
				searchItemValueId='cameraMake';
			}else if (value=='14'){
				searchItemValueId='cameraModel';
			}else if (value=='15'){
				searchItemValueId='orientation';
			}else if (value=='7'||value=='8'){
				searchItemValueId='searchItemTextSample';
			}else {
				searchItemValueId='searchItemTextSample';
			}
			var clone=document.getElementById(searchItemValueId).cloneNode(true);
			clone.id='searchItemValue'+row+col;
			return clone;
			
		}
		function getSearchItemCompare(value){
			var searchItemCompare;
			var CompareSample=document.getElementById('searchItemCompareSample');
			var NumberCompareSample=document.getElementById('searchItemNumberCompareSample');
			if (value=='0'){
				searchItemCompare=CompareSample;
			}else if (value=='1'){
				searchItemCompare=CompareSample;
			}else if (value=='4'){
				searchItemCompare=NumberCompareSample;
			}else if (value=='5'){
				searchItemCompare=NumberCompareSample;
			}else if (value=='6'){
				searchItemCompare=CompareSample;
			}else if (value=='9'){
				searchItemCompare=CompareSample;
			}else if (value=='12'){
				searchItemCompare=CompareSample;
			}else if (value=='13'){
				searchItemCompare=CompareSample;
			}else if (value=='14'){
				searchItemCompare=CompareSample;
			}else if (value=='15'){
				searchItemCompare=CompareSample;
			}else{
				searchItemCompare=NumberCompareSample;
			}
			return searchItemCompare.cloneNode(true);
		}
		</script>
		<style type="text/css">
			.searchItem{float:left;display:block;width:auto;align:right;border:solid;border-width:1px;border-color:white}
			.searchItemName{width:160px;display:block;float:none;}
			.searchItemCompare{width:40px;height:20px;float:left;}
			.searchItemText{width:120px;height:20px;padding:0px;float:none;}
			.searchItemSelect{width:120px;float:none;}
			.filter_cell{display:none;}
			.filter{float:none;display:block;height:auto}
			.row{float:left;display:block;width:100%;}
			.parenthesesButton{width:10px;height:41px;float:left;display:inline;text-align:center;border:none;display:none}
			.booleanButton{width:50px;height:41px;float:left;text-align:center;border:none;}
			.plusButton{width:50px;height:41px;float:left;}


			/*datePicker css*/
			div.ui-datepicker{font: 62.5% "Trebuchet MS", sans-serif;}
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}

		</style>
		

	</head>
	<body id="body" onLoad="addCol(document.getElementById('plusColButton0'));">
		<div id="filter_title"><b>Suchen Bilder</b></div>
		<div style="height:10px"></div>
		<form action="<%=dbmode%>SearchApp?searchFor=thumbs&in=search" method="post" target="resultFrame">

			<div id="filter">
				<div id="row0" class="row" row="0" count="0">
				<input id="leftParentheses0" type="text" class="parenthesesButton" value="(" readOnly="readOnly"/>
				<input id="minusColButton0" type="button" value="-" class="plusButton" onclick="removeCol(this)"/>
				<input id="plusColButton0" type="button" value="+" class="plusButton" onclick="addCol(this)"/>
				<input id="rightParentheses0" type="text" class="parenthesesButton" value=")" readOnly="readOnly"/>
			</div>
			<input id="plusRowButton" type="button" value="+" class="plusButton" row="0" onclick="addRow(this)"/>
			</div>
			<div style="clear:both;display:block;">
				<input type="submit" value="suchen!" style="width:100px;height:50px"/>
				<input type="button" value="clear" onClick="window.location.reload(true)" style="width:100px;height:50px"/>
			</div>
			<div style="float:left">
				<input id="furtherSearch" name="furtherSearch" type="checkbox" />
				<label for="furtherSearch">Weiter Suchen?</label>
			</div>
		</form>
		
		
		
		<div id="Sample" class="sample" style="display:none">
			<div id="rowSample" class="row" row="m" count="n"></div> 
			
			<div id="searchItemSample" class="searchItem" row="x" col="x"></div>
			
			<input id="searchItemTextSample" name="sample" type="text" class="searchItemText"/>
				
			<input id="searchItemTimeSample" name="sample" type="text" class="searchItemText" />				
			
			<input id="booleanButtonSample" name="sample" type="text" readOnly="readOnly" class="booleanButton" value="AND"/>
			
			<select id="searchItemCompareSample" name="sample" class="searchItemCompare">
				<option>=</option>
				<option>!=</option>
			</select>
			<select id="searchItemNumberCompareSample" name="sample" class="searchItemCompare">
				<option>=</option>
				<option>!=</option>
				<option>&gt;=</option>
				<option>&lt;=</option>
			</select>	
			<select id="category" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<DBCategory> categories = (ArrayList<DBCategory>)request.getAttribute("categories");
					for(int i=0;i<categories.size();i++) {
						DBCategory tmp =categories.get(i);
				%>
					<option value="<%=tmp.getNr()%>"><%=tmp.getName()%></option>
				<%
					}
				%>
			</select>
			
			<select id="keyword" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<DBKeyword> keywords = (ArrayList<DBKeyword>)request.getAttribute("keywords");
					for(int i=0;i<keywords.size();i++) {
						DBKeyword tmp =keywords.get(i);
				%>
					<option value="<%=tmp.getNr()%>"><%=tmp.getWord()%></option>
				<%
					}
				%>
			</select>
			
			<select id="orientation" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> formats = (ArrayList<String>)request.getAttribute("formats");
					for(int i = 0;i < formats.size();i++) {
						String tmp =formats.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
						
			<select id="exposureProgram" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> exposureProgram = (ArrayList<String>)request.getAttribute("exposureProgram");
					for(int i = 0;i < exposureProgram.size();i++) {
						String tmp =exposureProgram.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
			
			<select id="exposureMode" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> exposureMode = (ArrayList<String>)request.getAttribute("exposureMode");
					for(int i = 0;i < exposureMode.size();i++) {
						String tmp =exposureMode.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
			
			<select id="exposureTime" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> exposureTime = (ArrayList<String>)request.getAttribute("exposureTime");
					for(int i = 0;i < exposureTime.size();i++) {
						String tmp =exposureTime.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
		
			<select id="colorSpace" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> colorSpace = (ArrayList<String>)request.getAttribute("colorSpace");
					for(int i = 0;i < colorSpace.size();i++) {
						String tmp =colorSpace.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
			
			
			<select id="fnumber" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> fnumber =(ArrayList<String>)request.getAttribute("fnumber");
					for(int i = 0;i < fnumber.size();i++) {
						String tmp =fnumber.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
			
			<select id="cameraMake" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> makes = (ArrayList<String>)request.getAttribute("makes");
					for(int i = 0;i < makes.size();i++) {
						String tmp =makes.get(i);
				%>
					<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
			
			<select id="cameraModel" name="sample" class="searchItemSelect">
				<option selected="selected" value=""></option>
				<%
					ArrayList<String> models = (ArrayList<String>)request.getAttribute("models");
					for(int i = 0;i < models.size();i++) {
						String tmp =models.get(i);
				%>
						<option value="<%=tmp%>"><%=tmp%></option>
				<%
					}
				%>
			</select>
			
			<select id="searchItemNameSample" name="sample" class="searchItemName" lastIndex="0" onChange="changeCol(this)">
				<option index="" value="" selected="selected"></option>
				<option index="0" value="ktnr">Kategorie</option>
				<option index="1" value="kwnr">Schlagwort</option>
				<option index="2" value="imgWidth">Image Width</option>
				<option index="3" value="imgHeight">Image Height</option>
				<option index="4" value="exposureTime">exposure Time</option>
				<option index="5" value="fnumber">F-Number</option>
				<option index="6" value="exposureProgram">exposure Program</option>
				<option index="7" value="timeOriginal">Time Digitized</option>
				<option index="8" value="timeDigitized">Time Original</option>
				<option index="9" value="colorSpace">Color Space</option>
				<option index="10" value="exifImgWidth">Exif Img Width</option>
				<option index="11" value="exifImgHeight">Exif Img Height</option>
				<option index="12" value="exposureMode">exposure Mode</option>
				<option index="13" value="make">Make</option>
				<option index="14" value="model">Model</option>
				<option index="15" value="orientation">Orientation</option>
				<option index="16" value="xResolution">X Resolution</option>
				<option index="17" value="yResolution">Y Resolution</option>
			</select>
		</div>
	</body>
</html>